<script lang="ts" setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { useChatStore } from '@/store/chat'
import { useUIStore } from '@/store/ui'
import SidebarToolbar from '@/components/SidebarToolbar.vue'

const userStore = useUserStore()
const chatStore = useChatStore()
const uiStore = useUIStore()

// 组件挂载时初始化数据
onMounted(async () => {
  // 检查是否已经有数据加载
  const hasExistingData =
    chatStore.contacts && chatStore.contacts.length > 0 && userStore.currentUser !== null

  // 我们总是优先使用自定义mock数据
  if (import.meta.env.DEV) {
    // 在开发环境中，使用自定义mock数据
    try {
      console.log('Home.vue: 尝试加载自定义mock数据...')
      window.__USING_CUSTOM_MOCK__ = true

      // 如果没有数据，则初始化自定义mock数据
      if (!hasExistingData) {
        const { initializeWithMockData } = await import('@/mock/examples')
        await initializeWithMockData()
        console.log('Home.vue: 自定义mock数据已加载')
      } else {
        console.log('Home.vue: 已有数据，跳过初始化')
      }
    } catch (error) {
      console.error('Home.vue: 加载自定义mock数据失败，回退到内置mock数据:', error)
      window.__USING_CUSTOM_MOCK__ = false

      // 如果自定义mock数据加载失败，则使用内置mock数据
      if (!userStore.currentUser) {
        userStore.setUser({
          id: 'current-user',
          username: 'admin',
          nickname: '管理员',
          avatar:
            '',
          status: 'online',
          email: 'admin@xlchat.com'
        })
      }

      // 只有在联系人列表为空时才初始化聊天数据
      if (!chatStore.contacts.length) {
        console.log('Home.vue: 初始化内置mock聊天数据')
        await chatStore.initMockData()
      }
    }
  } else {
    // 非开发环境（生产环境）使用内置mock数据或连接真实API
    console.log('Home.vue: 非开发环境，初始化内置数据或连接API')
    // 实际生产环境可能是连接真实API，而不是使用mock数据
  }

  // 更新聊天徽章数量
  uiStore.updateToolbarBadge('chat', chatStore.totalUnreadCount)
})
</script>

<template>
  <div class="home-container d-flex h-100 overflow-hidden">
    <!-- 左侧垂直工具栏 -->
    <SidebarToolbar />
    <!-- 主内容区域 - 使用路由 -->
    <div class="main-content-area">
      <router-view />
    </div>
  </div>
</template>

<style scoped>
.home-container {
  background-color: var(--theme-bg-primary);
  user-select: none;
}

.main-content-area {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    flex-direction: column;
  }

  .position-fixed {
    top: auto !important;
    bottom: 20px;
  }
}
</style>
